<template>
  <div class="recommend">
    <ul>
      <li v-for="(item,index) in dataList"
          :key="index"
          @click="goDetail(item.id)"
      >
        <h3>
          <img v-lazy="item.imgUrl">
        </h3>
        <div>
          <h3>{{item.name}}</h3>
          <p>{{item.content}}</p>
          <h4>价格：{{item.price}} RMB</h4>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { Lazyload } from 'mint-ui';
export default {
  name: "Recommend",
  props:{
    dataList:Array
  },
  methods:{
    goDetail(id){
      this.$router.push({
        path:'/detail',
        query:{
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.recommend{
  margin-top: 10px;
}
ul{
  display: flex;
  flex-wrap: wrap;

}
ul li{
  margin-top: 20px;
  width: 50%;
  text-align: center;
  p{
    color: saddlebrown;
  }
  h4{
    color: orange;
  }
  img{
    width: 100%;
    height: 100%;
  }
}
</style>